import { NavBar } from 'antd-mobile'
import React,{useState,useEffect} from 'react'
import { Card ,Button} from 'antd-mobile'
import { listIndex } from '../../request/api'
function Index() {
   let [list, setList] = useState([])
      useEffect(() => {
          listIndex().then(res => {
              console.log('list', res)
              if (res.data.code == 200) {
                  setList(res.data.data)
              }
          })
      }, [])
  return (
    <div>
      <NavBar>我的预定</NavBar>

       {
               list.length>0&& list.map((item, index) => {
                  return <Card style={{margin:'12px'}}> <div style={{ display: 'flex' }}>
                    <img src={item.image} alt="" style={{ marginRight: '15px' ,width:'60px'}} />
                    <div>
                      <p>{item.title}</p>
                     <br />
                      <p>{item.title}</p>
                    </div>
                  <Button style={{width:'60px',height:'30px',borderRadius:'20px'}}>{item.price}</Button>
                  </div>
      
      
                  </Card>
                })
              }
    </div>
  )
}

export default Index
